<template>
  <div id="power">
    <div class="banner">
      <div id="banner-left">
        <!-- 图表 -->
        <adminEcharts></adminEcharts>
      </div>
      <div class="banner-right">
        <!-- 超级管理员数量 -->
        <div class="supertube">
          <div class="left">
            <p class="person">Super Administrator</p>
            <p class="num">1</p>
          </div>
          <div class="right">
            <span>
              <i class="iconfont icon-chaojiguanliyuan1"></i>
            </span>
          </div>
        </div>
        <!-- 普通管理员数量 -->
        <div class="supertube">
          <div class="left">
            <p class="person">General Administrator</p>
            <p class="num">{{generalGradient}}</p>
          </div>
          <div class="right">
            <span>
              <i class="iconfont icon-guanliyuan1"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 管理 -->
    <el-table
      :data="adminData"
      empty-text="暂时还没任何数据哦"
      stripe
      border
    >
      <el-table-column
      prop="name"
      label="注册日期"
      align="center"
      >
        <template #default="scope">
          {{conversionDate(scope.row.date)}}
        </template>
      </el-table-column>
      <el-table-column
      prop="name"
      label="用户名"
      align="center"
      >
      </el-table-column>
      <el-table-column
      prop="pass"
      label="密码"
      align="center"
      >
      </el-table-column>
      <el-table-column
      prop="name"
      label="头像"
      align="center"
      >
        <template #default='scope'>
          <el-image
            style="width: 70px; height: 70px"
            :src="baseURL+scope.row.phone"
          > 
            <template #error>
            <div class="image-slot">
              <i class="iconfont icon-bianzu"></i>
            加载失败
            </div>
            </template>
            <template #placeholder>
              <div class="error">
                <el-icon class="is-loading">
                  <i class="iconfont icon-zhengzaijiazai" style="font-size='20px'"></i>
            </el-icon>
            正在加载
              </div>
            </template>
            </el-image>
        </template>
      </el-table-column>
      <el-table-column
      prop="name"
      label="文章权限管理"
      align="center"
      >
        <template #default="scope">
          <el-switch 
          v-model="scope.row.allowPublish" 
          active-text="是否允许发表"  
          :loading="scope.row.loading1"
          :disabled="!supertube||scope.row.Supertube"
          @change="Change1(scope.row)">
          </el-switch>
          <el-switch 
          v-model="scope.row.allowUpdate" 
          active-text="是否允许修改"
          :loading="scope.row.loading2"
          :disabled="!supertube||scope.row.Supertube"
          @change="Change2(scope.row)"
          >
          </el-switch>
          <el-switch 
          v-model="scope.row.allowDelete" 
          active-text="是否允许删除"
          :loading="scope.row.loading3"
          :disabled="!supertube||scope.row.Supertube"
          @change="Change3(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
      prop="name"
      label="操作"
      align="center"
      >
        <template #default="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import adminEcharts from "@/components/echarts/adminNun"
export default {
  name: 'Jurisdiction',
  data(){
    return{
      // 超级管理员数量
      superNum:0,
      // 普通管理员数量
      general:0,
      // 普通管理员渐变
      generalGradient:0,
      // 管理员信息
      adminData:[],
      // 当前管理员是否为超级管理员
      supertube:false
    }
  },
  methods:{
    // 数量渐变
    gradient(num){
      let time = null
      time =  setInterval(()=>{
        if(this.generalGradient<this.general){
          this.generalGradient ++
        }else{
          clearInterval(time)
        }
        
      },100)
    },
    // 获取管理员
    async getAdminData(){
      let {data} = await this.$axios.get("/admin/administrators/getAll")
      if(data.code) return this.$message.warning(data.mes)
      // 检测当前管理员是否为超级管理员
      this.supertube = data.supertube
      let d = data.data
      d.forEach(item=>{
        item.loading1 = false,
        item.loading2 = false,
        item.loading3 = false
      })
      this.adminData = d
      this.adminData.forEach(item=>{
        if(item.Supertube){
          this.superNum++
        }else{
          this.general++
        }
      })
    },
     // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${y}-${month}-${day} ${h}:${f}:${s}`
    },
    // 切换过程 发表权限
    Change1(item){
      let time = null
      clearTimeout(time)
      item.loading1 = true
      time =  setTimeout(async () => {
        item.loading1 = false
        let {data} = await this.$axios.post("/admin/adminJurisdiction/isPublish",{
          _id:item._id,
          allowPublish:item.allowPublish
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
      }, 1000)
    },
    // 切换过程 修改权限
    Change2(item){
      let time = null
      clearTimeout(time)
      item.loading2 = true
      time =  setTimeout(async () => {
        item.loading2 = false
        let {data} = await this.$axios.post("/admin/adminJurisdiction/isUpdate",{
          _id:item._id,
          allowUpdate:item.allowUpdate
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
      }, 1000)
    },
    // 切换过程 删除权限
    Change3(item){
      let time = null
      clearTimeout(time)
      item.loading3 = true
      time =  setTimeout(async () => {
        item.loading3 = false
        let {data} = await this.$axios.post("/admin/adminJurisdiction/isDelete",{
          _id:item._id,
          allowDelete:item.allowDelete
        })
        if(data.code) return this.$message.warning(data.mes)
        this.$message.success(data.mes)
      }, 1000)
    },
    // 删除管理员提示
    open(item){
      this.$confirm('此操作将会永久删除该管理员和其发表的所有内容,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          this.deleteAdmin(item)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 删除管理员
    async deleteAdmin(item){
      let {data} = await this.$axios.post("/admin/adminJurisdiction/deleteAdmin",{
        _id:item._id,
        allowDelete:item._allowDelete
      }) 
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getAdminData()
    }
  },
  mounted(){
    // 数量渐变
    this.gradient(this.general)
    // 获取管理员
    this.getAdminData()
  },
  components:{
    adminEcharts
  }
}
</script>

<style scoped lang='less'>
#power{
  width: 100%;
  .banner{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    user-select: none;
    margin-bottom: 30px;
    #banner-left{
      flex: 1;
    }
    .banner-right{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .supertube{
        height: 130px;
        background-color: #2DCE89;
        width: 90%;
        margin: 0 auto;
        display: flex;
        .left{
          flex: 1;
          color:#fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          flex-wrap: wrap;
          .person{
            font-size: 22px;
         
          }
          .num{
            font-size: 30px;
            font-weight: bold;
          
          }
        }
        .right{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            width: 70px;
            height: 70px;
            border: 1px solid #fff;
            text-align: center;
            line-height: 70px;
            border-radius: 50%;
            overflow: hidden;
            i{
              font-size: 40px;
            }
          }
        }
      }
    }
  }
}
</style>